<template>
  <div class="nearby">
    <h3 class="nearby_title">附近店铺</h3>
    <router-link v-for="item in nearbyList" :key="item._id" :to="`/shop/${item._id}`">
      <ShopInfo :item="item"/>
    </router-link> 
    <router-link v-for="item in nearbyList" :key="item._id" :to="`/shop/${item._id}`">
      <ShopInfo :item="item"/>
    </router-link>
    <router-link v-for="item in nearbyList" :key="item._id" :to="`/shop/${item._id}`">
      <ShopInfo :item="item"/>
    </router-link>   
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { get } from "../../utils/request";
import ShopInfo from "../../components/ShopInfo";

//处理附近店铺的逻辑
const useNearbyListEffect = () => {
  const nearbyList = ref([]);
  const getNearbyList = () => {
    get("/api/shop/hot-list")
      .then(function (response) {
        // console.log(response.data);
        if (response.data) {
          nearbyList.value = response.data;
          // console.log(nearbyList);
        }
        localStorage.isLogin = true;
        router.push({ name: "Home" });
      })
      .catch(function (error) {
        // showToast("登录失败");
      });
  };
  return { nearbyList, getNearbyList };
};

export default {
  name: "Nearby",
  components: { ShopInfo },
  setup() {
    const { nearbyList, getNearbyList } = useNearbyListEffect();
    getNearbyList();
    return {
      nearbyList,
    };
  },
};
</script>

<style lang="scss" scoped>
.nearby {
  font-size: 0.18rem;
  // color: #333333;
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    font-weight: normal;
    color: #333333;
  }
}
a{
  text-decoration: none;
}
a:hover{
  color: none;
}
</style>
